/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import '../date-picker/index.less';

@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';

.@{picker-panel-prefix-cls} {
  @apply text-color-text-primary;
  @apply text-xs;
  @apply shadow-md;
  @apply bg-color-bg-1;
  @apply rounded;
  @apply leading-4;
  @apply ~'my-0.5' mx-0;

  &__body-wrapper::after,
  &__body::after {
    @apply content-[''];
    @apply table;
    @apply clear-both;
  }

  &__body-wrapper {
    position: relative;
  }

  &__content {
    @apply relative;
    @apply py-0 px-4;

    &:not(.@{date-range-picker-prefix-cls}__content) {
      .@{month-table-prefix-cls},
      .@{year-table-prefix-cls} {
        td .cell {
          @apply my-0;
          @apply mx-auto;
        }
      }
    }
  }

  &__footer {
    @apply border-t border-t-color-bg-3;
    @apply py-3 px-4;
    @apply bg-color-bg-1;
    @apply overflow-hidden;
    @apply rounded-b;

    .@{button-prefix-cls} {
      min-width: 72px;
      @apply h-7;
      @apply text-xs;

      &:first-child {
        @apply pl-0;
      }

      &:last-child {
        float: right;
      }
    }

    .@{button-prefix-cls}--text {
      @apply text-left;
    }
  }

  &__shortcut {
    @apply block;
    width: 100px;
    @apply my-0 mx-auto;
    @apply rounded;
    @apply border-0;
    @apply bg-transparent;
    @apply leading-8;
    @apply text-xs;
    @apply text-color-text-primary;
    @apply pl-4;
    @apply text-left;
    @apply outline-0;
    @apply cursor-pointer;
    @apply overflow-hidden;
    @apply text-ellipsis;
    @apply whitespace-nowrap;

    &:hover {
      @apply bg-color-bg-2;
    }
  }

  &__shortcut-selected[type='button'] {
    @apply text-color-brand;
    @apply bg-color-brand-hover-subtle;
  }

  &__btn {
    @apply text-color-text-primary;
    @apply border border-solid border-color-border-separator;
    @apply text-xs;
    @apply leading-6;
    @apply rounded;
    @apply py-0 px-5;
    @apply cursor-pointer;
    @apply outline-0;
    @apply bg-transparent;

    [disabled] {
      @apply text-color-text-disabled;
      @apply cursor-not-allowed;
    }
  }

  &__icon-btn {
    @apply text-sm;
    @apply leading-4;
    @apply fill-color-text-primary;
    @apply border-0;
    background: 0 0;
    @apply cursor-pointer;
    @apply outline-0;

    &:hover {
      @apply fill-color-brand;
    }

    &.is-disabled {
      @apply text-color-text-disabled;

      &:hover {
        @apply cursor-not-allowed;
      }
    }
  }

  &__link-btn {
    @apply align-middle;
    @apply rounded;
  }

  [slot='sidebar'],
  &__sidebar {
    @apply absolute;
    @apply top-0;
    @apply bottom-0;
    width: 116px;
    @apply border-r border-r-color-bg-3;
    @apply box-border;
    padding-top: 20px;
    @apply bg-color-bg-1;
    @apply overflow-auto;

    & + .@{picker-panel-prefix-cls}__body {
      margin-left: 116px;
    }
  }

  &__timezone {
    @apply py-1 px-0;
    @apply border-t border-t-color-bg-3;

    .@{picker-panel-prefix-cls}__tzlist {
      @apply z-10;
      @apply overflow-y-hidden;

      &-li {
        @apply h-8;
        @apply leading-8;
        @apply my-0 mx-2;
        @apply py-0 px-2;
        @apply rounded;
        @apply whitespace-nowrap;
        @apply overflow-hidden;
        @apply text-ellipsis;
        @apply cursor-pointer;

        &:hover {
          @apply bg-color-brand;
          @apply text-color-text-inverse;
        }
      }

      .@{css-prefix}popup {
        @apply absolute;
        width: 272px;
        bottom: 98px;
        max-height: 302px;
        @apply border-t border-t-color-bg-3;
      }
    }

    .@{input-prefix-cls} {
      @apply relative;

      input {
        @apply border-0;
      }

      svg {
        @apply !fill-color-text-primary;
      }
    }
  }
}
